<template>
  <div>
    <p class="bar foo">Hi!</p>
    <!-- 如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来实现指定： -->
    <p :class="$attrs.class">Hi!</p>
  </div>
</template>

<script>
import MyNotification from "../../../components/MyNotification";
export default {
  /**
   * 可以通过这种方式限制父组件可以访问到的方法，
   * ****** 默认是全部都可以方法问 *******
   */
  expose: ["telYouMyName"],
  methods: {
    telYouMyName() {
      MyNotification.success("消息", "我是子组件中的方法");
    },
    telMeYourName() {
      MyNotification.warning("消息", "谁调用了我");
    },
  },
};
</script>

<style>
.foo {
  border: 1px solid red;
}
.bar {
  color: red;
}
.baz {
  font-size: 48px;
}
</style>
